{extend name="common/base" /}
{block name="style"}

<style type="text/css">
    .upload-img{
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        float: right;
        /*margin-right: 0.2rem;*/

    }
    .upload-img input{
        position: absolute;
        right: 0.2rem;
        top: 0;
        width:0.785rem;
        height: 0.785rem;
        opacity: 0;
    }
</style>
{/block}
{block name="body"}
<link rel="stylesheet" type="text/css" href="__CDN__/html/css/mui.picker.min.css" />
<link href="__CDN__/html/css/mui.poppicker.css" rel="stylesheet" />
<div class="grzl-mains">
    <ul class="grzl-nav">
        <li class="li1">
            <span class="grz-li-tx grz-li-tx2">头像</span>
            <!--            {empty name="user.avatar"}
                        <img src="__CDN__/html/img/btn_wode.png" class="grz-li-tu">
                        {else /}
                        <img src="__CDN__{$user.avatar}" class="grz-li-tu">
                        {/empty}-->

            <div class="upload-img">
                {empty name="user.avatar"}
                <img src="__CDN__/html/img/btn_wode.png" id="my_img_id" class="grz-li-tu">
                {else /}
                <img src="__CDN__{$user.avatar}" id="my_img_id" class="grz-li-tu">
                {/empty}

                <input type="file" name="pic_url" id="service-img">
            </div>
        </li>
        <a href="{:url('My/set',array('s'=>1))}">
            <li>
                <span class="grz-li-tx">昵称</span>
                {empty name="user.nickname"}
                <span class="grz-li-span grz-li-span2">待完善</span>
                {else /}
                <span class="grz-li-span ">{$user.nickname}</span>
                {/empty}
            </li>
        </a>
        <li class="li2">
            <span class="grz-li-tx">手机号码</span>
            <span class="grz-li-span">{$user.phone}</span>
        </li>  
        <li id='sexPicker'>
            <span class="grz-li-tx">性别</span>
            <span class="grz-li-span js-sex">
                {if condition="$user.sex==0"}
                女
                {else /}
                男
                {/if}
            </span>
        </li> 
        <a href="{:url('My/set',array('s'=>2))}">
            <li>
                <span class="grz-li-tx">所属行业</span>

                {empty name="user.industry"}
                <span class="grz-li-span grz-li-span2">待完善</span>
                {else /}
                <span class="grz-li-span ">{$user.industry}</span>
                {/empty}
            </li> 
        </a>
        <a href="{:url('My/set',array('s'=>3))}">
            <li>
                <span class="grz-li-tx">公司名称</span>
                {empty name="user.company"}
                <span class="grz-li-span grz-li-span2">待完善</span>
                {else /}
                <span class="grz-li-span ">{$user.company}</span>
                {/empty}

            </li> 
        </a>
    </ul>
    <a href="{:url('index/Pub/logout')}"><button type="button" class="dw-aiy" id="save" style="line-height:0;margin-bottom: 0.6rem;">退出登录</button></a>
</div>
{/block}
{block name="script"}   
<script src="__CDN__/html/js/mui.picker.min.js"></script>
<script src="__CDN__/html/js/mui.poppicker.js"></script>

<script type="text/javascript">



    //-----------------------------------------
    //选择性别
    var sexPicker = new mui.PopPicker();
    sexPicker.setData([{
            value: '0',
            text: '女'
        }, {
            value: '1',
            text: '男'
        }]);
//    var sexPickerButton = $('#sexPicker');
//            var sexResult = doc.getElementById('js-sex');
//            var sexResultVal = doc.getElementById('js-sex-val');
    document.querySelector('#sexPicker').addEventListener('tap', function (event) {
        sexPicker.show(function (items) {
            $('.js-sex').html(items[0].text);
            $.post("{:url('My/setuserinfo')}", {sex: items[0].value}, function (res) {
//                if (res.code == '0') {
//                    mui.toast(res.msg);
//                }
            }, 'json');

        });
    }, false);


    $("#service-img").change(function () {
        readURL(this);
    });

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#my_img_id').attr('src', e.target.result);

            };
            reader.readAsDataURL(input.files[0]);

            var formData = new FormData();
            var img_file = document.getElementById('service-img');

            var fileobj = img_file.files[0];
            formData.append("file", fileobj);

            $.ajax({
                url: "{:url('Pub/upload')}",
                type: "POST",
                data: formData,
                /**
                 *必须false才会自动加上正确的Content-Type
                 */
                contentType: false,
                /**
                 * 必须false才会避开jQuery对 formdata 的默认处理
                 * XMLHttpRequest会对 formdata 进行正确的处理
                 */
                processData: false,
                success: function (data) {
                    $.post("{:url('My/setuserinfo')}", {avatar: data.data.url}, function (res) {
                        if (res.code == '0') {
                            mui.toast(res.msg);
                        }
                    }, 'json');
                },
                error: function () {
                    alert("上传失败！");
                }
            });


        }
    }
</script>
{/block}